<!-- Created by henian.xu on 2018/7/20. -->

<template>
    <el-pagination
        v-if="totalRows"
        :layout="layout"
        :page-sizes="pageSizes"
        :total="value.totalRows"
        :page-size="value.pageSize"
        :current-page="value.currentPage"
        @current-change="onCurrentChange"
        @size-change="onSizeChange"
    />
</template>

<script>
export default {
    name: 'Pagination',
    data() {
        return {};
    },
    props: {
        value: {
            type: Object,
            required: true,
        },
        layout: {
            type: String,
            default: 'total, sizes, prev, pager, next, jumper',
        },
        pageSizes: {
            type: Array,
            default() {
                return [2, 10, 20, 50, 100];
            },
        },
        initEmit: {
            type: Boolean,
            default: false,
        },
    },
    computed: {
        totalRows() {
            return this.value.totalRows;
        },
    },
    methods: {
        onCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.$emit('input', {
                ...this.value,
                currentPage: val,
            });
        },
        onSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            this.$emit('input', {
                ...this.value,
                pageSize: val,
            });
        },
    },
    mounted() {
        this.initEmit && this.$emit('input', { ...this.value });
    },
};
</script>

<style lang="scss">
</style>
